<template>
  <div class="container">
    <div class="container-head flex_btw">
      <div class="head-title flex_x">
        <img class="head-icon" src="@/assets/images/data.png" alt="" />
        <span>数据配置-品牌</span>
      </div>
      <div class="flex_x">
        <el-input
          class="mr20"
          v-model="params"
          style="width: 240px"
          placeholder="请输入编号或名称"
        >
        </el-input>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary">模板下载</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="primary" @click="isAdd = true">新增</el-button>
        <delBtn></delBtn>
      </div>
    </div>
    <div class="list_con" v-loading="loading">
      <el-table
        :data="tableData"
        v-resize="{ bottomOffset: 120 }"
        ref="tableRef"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        header-cell-class-name="table_head_s"
        cell-class-name="table_cell_s"
      >
        <el-table-column type="selection" width="100" />
        <el-table-column prop="date" label="编号"> </el-table-column>
        <el-table-column prop="name" label="品牌名称"> </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
        <el-table-column prop="address" label="修改人"> </el-table-column>
        <el-table-column prop="address" label="修改时间"> </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template #default="scope">
            <el-button type="primary" link>编辑</el-button>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex_c list_page">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizeOption"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          :pager-count="5"
          @size-change="pagination.onSizeChange"
          @current-change="pagination.onCurrentChange"
        />
      </div>
    </div>
    <dialogAdd
      :title="editId ? '编辑品牌' : '新增品牌'"
      v-model:isShow="isAdd"
      @on-success="refresh"
    ></dialogAdd>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import dialogAdd from "./components/add.vue";
import { login } from "@/api/common";
import { useTable } from "@/hooks/pageList";

interface User {
  date: string;
  name: string;
  address: string;
}
const isAdd = ref(false);
const editId = ref("");
const router = useRouter();
const [tableData, refresh, loading, pagination] = useTable(
  login,
  {},
  {
    immediate: true,
  }
);

const params = ref("");
const multipleTableRef = ref();
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = () => {};
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
</script>
